<template>
    <div class='app'>
        <div class="header">
            <div class="headWrap">
                <div class="headLeft">
                    <img class="logo" src="../../assets/images/attendance-board/logo.png" @click="goBack" />
                </div>
                <div class="headCenter">
                    <span>{{ prjTitle }}</span>
                </div>
                <div class="headRight">
                    <div class="time">
                        <img src="../../assets/images/attendance-board/time.png" />
                        <span>{{dataTime}}</span>
                    </div>
                    <div class="btn" @click="screenFullClick">
                        <span>{{isFullscreen?"退出全屏":"全屏"}}</span>
                        <img src="../../assets/images/attendance-board/full.png" v-show="!isFullscreen" />
                        <img src="../../assets/images/attendance-board/outFull.png" v-show="isFullscreen" />
                    </div>
                </div>
            </div>
            <div class="welcome">欢迎莅临{{ prjTitle }}</div>
        </div>
        <div class="content">
            <div class="contentLeft">
                <div class="envMsg">
                    <div class="msgItem">
                        <img src="../../assets/images/attendance-board/dinwei.png" />
                        <span>{{ city }}</span>
                    </div>
                    <div class="msgItem">
                        <img src="../../assets/images/attendance-board/wendu.png" />
                        <span>{{ weatherObj.temperature }}℃</span>
                    </div>
                    <div class="msgItem">
                        <img :src="weatherObj.weatherPic" />
                        <span>{{ weatherObj.weather }}</span>
                    </div>
                </div>
                <div class="attendanceCount">
                    <div class="countTitle">现场人员统计</div>
                    <div class="chart">
                        <div class="chartWrap">
                            <el-progress class="keyPost" type="circle" :stroke-width="15" :percentage="managerRate"></el-progress>
                            <p>关键岗位出勤率</p>
                        </div>
                        <div class="chartWrap">
                            <el-progress class="worker" type="circle" :stroke-width="15" :percentage="workerRate"></el-progress>
                            <p>劳务工出勤率</p>
                        </div>
                        <div class="chartWrap">
                            <el-progress class="scene" type="circle" :stroke-width="15" :percentage="enterEmpCount" :format="sceneFormat"></el-progress>
                            <p>现场人数</p>
                        </div>
                        
                        <progressColor style="width: 0;height: 0;"></progressColor>
                    </div>
                    <div class="manager">
                        <div class="item" v-for="(item, index) in managerEmpList" :key="index">
                            <div class="photo">
                                <img :src="item.avatar" />
                            </div>
                            <div class="msg">
                                <div class="name">{{ item.workTypeName }}</div>
                                <div class="come" v-if="item.attendState===1">已到岗</div>
                                <div class="uncome" v-else>未到岗</div>
                            </div>
                        </div>
                    </div>
                    <div class="groupList">
                        <vue-seamless-scroll class="localItems" :data="groupList" :class-option="classOption">
                            <div class="group" v-for="item in groupList" :key="item.id">
                                <div class="title">{{ item.name }}</div>
                                <div class="count">
                                    <div class="countLeft">
                                        <div class="label">今日出勤：</div>
                                        <div class="value">{{ item.attNum }}人</div>
                                    </div>
                                    <div class="countRight">
                                        <div class="label">现场：</div>
                                        <div class="value">{{ item.num }}人</div>
                                    </div>
                                </div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
            <div class="contentCenter">
                <div class="centerTop"></div>
                <div class="centerbottom">
                    <div class="abnormalTitle">今日温度异常人员</div>
                    <div class="tableHead">
                        <div class="label">姓名</div>
                        <div class="label">温度</div>
                    </div>
                    <div class="abnormalList">
                        <vue-seamless-scroll class="localItems" :data="abnormalList" :class-option="classOption">
                            <div class="item" v-for="(item, index) in abnormalList" :key="index">
                                <div class="name">{{ item.empName }}</div>
                                <div class="temp">{{ item.temperature }}℃</div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
            <div class="contentRight">
                <div class="recordWrap">
                    <div class="recordTitle">今日考勤记录</div>
                    <div class="recordList">
                        <el-carousel indicator-position="none" arrow="never">
                            <el-carousel-item v-for="(item, index) in attendanceList" :key="index">
                                <div class="recordItem" :class="{border_b: j%2 == 0}" v-for="(child, j) in item" :key="j">
                                    <div class="photo">
                                        <img :src="child.photo?child.photo:'https://file.3msoft.com.cn/ms/pro/sys/rule/2025070115004663526.png'" />
                                    </div>
                                    <div class="msg">
                                        <div class="people">
                                            <span class="name">{{ child.empName }}</span>
                                            <span class="workType">{{ child.workTypeName }}</span>
                                        </div>
                                        <div class="typeAndTemp">
                                            <span class="type">{{ child.direction ===1 ? "进" : child.direction ===0 ? "出" : "未知" }}</span>
                                            <span class="temp" :class="{red: child.temperature>37.3}" v-if="child.temperature">{{ child.temperature }}℃</span>
                                        </div>
                                        <div class="gateName">{{ child.name }}</div>
                                        <div class="time">{{ child.time }}</div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <div class="recordWrap">
                    <div class="recordTitle">今日访客记录</div>
                    <div class="recordList">
                        <el-carousel indicator-position="none" arrow="never">
                            <el-carousel-item v-for="(item, index) in visitorList" :key="index">
                                <div class="recordItem" :class="{border_b: j%2 == 0}" v-for="(child, j) in item" :key="j">
                                    <div class="photo">
                                        <img :src="child.photoUrl" />
                                    </div>
                                    <div class="msg">
                                        <div class="people">
                                            <span class="name">{{ child.empName }}</span>
                                        </div>
                                        <div class="typeAndTemp">
                                            <span class="type">{{ child.direction ===1 ? "进" : child.direction ===0 ? "出" : "未知" }}</span>
                                            <span class="temp" :class="{red: child.temperature>37.3}" v-if="child.temperature">{{ child.temperature }}℃</span>
                                        </div>
                                        <div class="gateName">{{ child.name }}</div>
                                        <div class="time">{{ child.showTime }}</div>
                                    </div>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="footer">Copyright © 2021-2023 安固士（湖北）科技有限公司</div> -->
    </div>
</template>

<script>
import moment from 'moment';
import screenfull from "screenfull";
import progressColor from './progress-color.vue';
import vueSeamlessScroll from 'vue-seamless-scroll'
import { spotData, abnormalList, discernList, clockList } from "@/api/attendance-board.js";
import { getWeather } from "@/api/api";
export default {
    name: 'attendance',
    components: {
        progressColor,
        vueSeamlessScroll
    },
    data() {
        return {
            deptId: "",
            prjTitle: "",
            city: "",
            weatherObj: {},
            isFullscreen: false,
            dataTime: "",
            timerId1: "",
            timerId2: "",
            managerRate: 0,
            workerRate: 0,
            enterEmpCount: 0,
            groupList: [], // 班组信息
            managerEmpList: [], // 管理人员
            abnormalList: [], // 温度异常
            attendanceList: [], // 考勤记录
            visitorList: [], // 访客记录
        };
    },
    created(){
        this.timerId1 = setInterval(() => {
            this.dataTime = moment(new Date()).format('hh:mm:ss') 
        }, 1000);
        
        this.prjTitle = this.$store.state.porjectObject.name

        this.deptId = this.$store.state.porjectObject.deptId
        this.getWeatherData()
        this.getPosition()
        this.initData()
        this.timerId2 = setInterval(() => {
            this.initData()
        }, 600000);
        
    },
    mounted() {
    //    this.initScreenFull() 
    },
    computed:{
        classOption() {
            return {
                step: 0.6, // 数值越大速度滚动越快
                limitMoveNum: 4, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    methods:{
        /* 初始化全屏工具 */
        initScreenFull() {
            if (screenfull.enabled) {
                screenfull.request(); // 默认全屏显示
                this.isFullscreen = true;
            }
        },
        
        /* 开启/关闭全屏 */
        screenFullClick() {
            if (!screenfull.enabled) {
                this.$Message.warning("您的浏览器不支持此功能");
                return false;
            }
            screenfull.toggle();
            this.isFullscreen = !this.isFullscreen;
        },

        /* 初始化考勤数据 */
        initData(){
            this.getSpotData()
            this.getAbnormalList()
            this.getClockList()
            this.getDiscernList()
        },

        /* 获取实时天气 */
        getWeatherData() {
            let params = {
                deptId: this.deptId
            };
            getWeather(params).then(res => {
                if (res.code == 200) {
                    this.$nextTick(() => {
                        this.weatherObj = res.data || {};
                        this.weatherObj["weatherPic"] = require("../../assets/images/common/" + this.weatherObj.weatherPic + ".png");
                    });
                }
            })
        },

        /* 获取项目位置 */
        getPosition(){
            let lng = this.$store.state.porjectObject.lng
            let lat = this.$store.state.porjectObject.lat
            AMap.service("AMap.Geocoder", () => {
                //实例化Geocoder
                let geocoder = new AMap.Geocoder({
                    city: "", //城市，默认:“全国”
                });
                geocoder.getAddress([lng, lat], (status, result) => {
                    let city
                    if ( status === "complete" && result.info === "OK" ) {
                        //获得了有效的地址信息:
                        //即，result.regeocode.formattedAddress
                        city = result.regeocode.addressComponent.city || result.regeocode.addressComponent.district
                    } else {
                        city = "暂无"
                        //获取地址失败
                    }
                    this.city = city
                })
            })
        },

        /* 现场人员分析 */
        getSpotData(){
            let param = {
                deptId: this.deptId
            }
            spotData(param).then(res=>{
                this.managerRate = Number((res.data.managerRate * 100).toFixed(2))
                this.workerRate = Number((res.data.workerRate * 100).toFixed(2))
                this.groupList = res.data.groupList
                this.managerEmpList = res.data.managerEmpList
                this.enterEmpCount = res.data.enterEmpCount
            })
        },

        /* 温度异常记录 */
        getAbnormalList(){
            let param = {
                deptId: this.deptId
            }
            abnormalList(param).then(res=>{
                this.abnormalList = res.data
            })
        },

        /* 现场人数 */
        sceneFormat(val){
            return val
        },

        /* 出勤记录 */
        getClockList(){
            let date = moment(new Date()).format('YYYY-MM-DD') 
            let param = {
                deptId: this.deptId,
                startDate: date + " 00:00:00",
                endDate: date + " 00:00:00"
            }
            clockList(param).then(res=>{
                let list = res.data

                var a = parseInt(list.length % 2); //取余

                var b = parseInt (list.length / 2); //取商

                let arr = []
                for (let index = 0; index < b; index++) {
                    let obj = [list[2*index], list[2*index + 1]]
                    arr.push(obj)
                }
                if(a!=0){
                    arr.push([list[list.length-1]])
                }
                this.attendanceList = arr
            })
        },

        /* 访客记录 */
        getDiscernList(){
            let param = {
                deptId: this.deptId,
                type: 3
            }
            discernList(param).then(res=>{
                let list = res.data

                var a = parseInt(list.length % 2); //取余

                var b = parseInt (list.length / 2); //取商

                let arr = []
                for (let index = 0; index < b; index++) {
                    let obj = [list[2*index], list[2*index + 1]]
                    arr.push(obj)
                }
                if(a!=0){
                    arr.push([list[list.length-1]])
                }
                this.visitorList = arr
            })
        },

        /* 返回 */
        goBack(){
            this.$router.go(-1)
        }
    },
    destroyed(){
        // 清除定时器
        clearInterval(this.timerId1)
        clearInterval(this.timerId2)
        if (screenfull.isFullscreen) {
            screenfull.toggle();
        }
    }
}
</script>
<style scoped lang='less'>
.app{
    width: 19.2rem;
    // height: 100vh;
    padding: 1.1rem 1rem 0;
    box-sizing: border-box;
    background-image: url("../../assets/images/attendance-board/main_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    &::-webkit-scrollbar{
        display: none;
    }
    .header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1.34rem;
        padding: 0 2rem;
        box-sizing: border-box;
        background-image: url("../../assets/images/attendance-board/header_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .headWrap{
            height: 0.94rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .headLeft{
                flex: 1;
                display: flex;
                align-items: center;
                .logo{
                    cursor: pointer;
                    width: 2.9rem;
                }
            }
            .headCenter{
                width: 6rem;
                font-size: 0.28rem;
                font-weight: bold;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                span{
                    width: 100%;
                    display: inline-block;
                    text-align: center;
                    line-height: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .headRight{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .time{
                    width: 1.75rem;
                    height: 0.35rem;
                    display: flex;
                    align-items: center;
                    margin-right: 1rem;
                    img{
                        margin-right: .1rem;
                        width: 0.33rem;
                        height: 0.33rem;
                    }
                    span{
                        font-size: 0.30rem;
                        font-weight: bold;
                        color: #89E6FF;
                        line-height: 0.35rem;
                    }
                }
                .btn{
                    cursor: pointer;
                    // width: 1.04rem;
                    // height: 0.42rem;
                    padding: 0.08rem 0.1rem;
                    background: rgba(0,204,255,0.18);
                    border: 1px solid #89E6FF;
                    opacity: 0.62;
                    border-radius: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        margin-right: 0.1rem;
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: #89E6FF;
                        line-height: 1;
                    }
                    img{
                        width: 0.25rem;
                        height: 0.25rem;
                    }
                }
            }
        }
        .welcome{
            position: absolute;
            bottom: -0.1rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.22rem;
            font-weight: 500;
            color: #89E6FF;
        }
    }
    .content{
        display: flex;
        justify-content: space-between;
        .contentLeft{
            width: 5rem;
            height: 9rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .envMsg{
                display: flex;
                justify-content: space-around;
                padding-top: 0.1rem;
                .msgItem{
                    display: flex;
                    align-items: center;
                    img{
                        height: 0.35rem;
                        margin-right: 0.1rem;
                    }
                    span{
                        font-size: 0.28rem;
                        font-weight: 400;
                        color: #89E6FF;
                    }
                }
            }
            .attendanceCount{
                width: 5rem;
                height: 8.25rem;
                background-image: url("../../assets/images/attendance-board/left_bg.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                overflow: hidden;
                .countTitle{
                    margin: 0.17rem 0.2rem 0;
                    width: 3.33rem;
                    height: 0.57rem;
                    padding-left: 0.4rem;
                    box-sizing: border-box;
                    line-height: 0.57rem;
                    font-size: 0.22rem;
                    font-weight: bold;
                    color: #89E6FF;
                    background-image: url("../../assets/images/attendance-board/title_bg1.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .chart{
                    margin-top: 0.3rem;
                    display: flex;
                    justify-content: center;
                    .chartWrap{
                        text-align: center;
                        >p{
                            margin-top: 0.05rem;
                            font-size: 0.18rem;
                            color: #ffffff;
                        }
                        .worker{
                            margin: 0 0.3rem;
                        }
                        /deep/.el-progress-circle{
                            width: 1.16rem !important;
                            height: 1.16rem !important;
                        }
                        /deep/.el-progress path:first-child {
                            stroke: #00354E;
                        }
                        .keyPost,.worker{
                            /deep/.el-progress__text{
                                font-size: 0.24rem !important;
                                font-weight: bold;
                                color: #FFFFFF !important;
                            }
                        }
                        .scene{
                            /deep/.el-progress__text{
                                font-size: 0.4rem !important;
                                font-weight: bold;
                                color: #FFFFFF !important;
                            }
                        }
                        .keyPost /deep/ .el-progress-circle {
                            // 进度条颜色
                            svg > path:nth-child(2) {
                                stroke: url(#color1);
                            }
                        }
                        .worker /deep/ .el-progress-circle {
                            // 进度条颜色
                            svg > path:nth-child(2) {
                                stroke: url(#color2);
                            }
                        }
                        .scene /deep/ .el-progress-circle {
                            // 进度条颜色
                            svg > path:nth-child(2) {
                                stroke: url(#color3);
                            }
                        }
                    }
                }
                .manager{
                    margin-top: 0.3rem;
                    display: flex;
                    justify-content: center;
                    .item{
                        width: 2.1rem;
                        height: 1.05rem;
                        padding: 0.08rem;
                        box-sizing: border-box;
                        background: rgba( 89, 222, 255, 0.18 );
                        border: 1px solid #59DEFF;
                        border-radius: 6px;
                        display: flex;
                        &:first-child{
                            margin-right: 0.15rem;
                        }
                        .photo{
                            width: 0.67rem;
                            height: 0.87rem;
                            background: #9C9C9C;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .msg{
                            padding-top: 0.05rem;
                            flex: 1;
                            text-align: center;
                            font-size: 0.22rem;
                            .name{
                                color: #89E6FF;
                            }
                            .come{
                                font-weight: bold;
                                color: #23FD8A;
                            }
                            .uncome{
                                font-weight: bold;
                                color: #FF2B39;
                            }
                        }
                    }
                }
                .groupList{
                    margin-top: 0.3rem;
                    padding: 0 0.3rem;
                    height: 3.8rem;
                    box-sizing: border-box;
                    overflow: hidden;
                    .group{
                        margin-top: 0.2rem;
                        .title{
                            padding-left: 0.15rem;
                            font-size: 0.22rem;
                            font-weight: bold;
                            color: #89E6FF;
                        }
                        .count{
                            margin-top: 0.1rem;
                            display: flex;
                            align-items: center;
                            height: 0.5rem;
                            box-sizing: border-box;
                            padding: 0 0.15rem;
                            background: linear-gradient(45deg, rgba(16, 63, 101, 1), rgba(16, 63, 101, 0));
                            .countLeft,.countRight{
                                flex: 1;
                                display: flex;
                                justify-content: space-between;
                                font-size: 0.2rem;
                                .label{
                                    flex: 2;
                                    color: #FFFFFF;
                                }
                                .value{
                                    flex: 1;
                                    color: #89E6FF;
                                    text-align: right;
                                }
                            }
                            .countLeft{
                                margin-right: 0.15rem;
                            }
                        }
                    }
                }
            }
        }
        .contentCenter{
            width: 6.65rem;
            height: 9rem;
            display: flex;
            flex-direction: column;
            .centerTop{
                flex: 1;
            }
            .centerbottom{
                width: 100%;
                height: 4.47rem;
                background-image: url("../../assets/images/attendance-board/center_bg.png");
                background-size: 100% 100%;
                overflow: hidden;
                .abnormalTitle{
                    margin: 0.17rem 0.16rem 0;
                    width: 3.78rem;
                    height: 0.57rem;
                    line-height: 0.57rem;
                    padding-left: 0.38rem;
                    box-sizing: border-box;
                    background-image: url("../../assets/images/attendance-board/title_bg2.png");
                    background-size: 100% 100%;
                    font-size: 0.22rem;
                    font-weight: bold;
                    color: #89E6FF;
                }
                .tableHead{
                    padding: 0 0.3rem;
                    display: flex;
                    justify-content: space-between;
                    .label{
                        padding: 0.12rem 0.4rem;
                        font-size: 0.24rem;
                        color: #89E6FF;
                        line-height: 1;
                    }
                }
                .abnormalList{
                    padding: 0 0.4rem;
                    height: 3.1rem;
                    box-sizing: border-box;
                    overflow: hidden;
                    .item{
                        display: flex;
                        justify-content: space-between;
                        font-size: 0.24rem;
                        padding: 0.15rem 0.2rem;
                        border-top: 1px solid rgba(30, 176, 252, 0.5);
                        .name{
                            padding-left: 0.1rem;
                            color: #FFFFFF;
                            line-height: 1;
                        }
                        .temp{
                            color: #FF2B39;
                            line-height: 1;
                        }
                    }
                }
            }
        }
        .contentRight{
            width: 5rem;
            height: 9rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .recordWrap{
                width: 100%;
                height: 4.47rem;
                background-image: url("../../assets/images/attendance-board/right_bg.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                .recordTitle{
                    margin: 0.17rem 0.2rem 0;
                    width: 3.33rem;
                    height: 0.57rem;
                    padding-left: 0.4rem;
                    box-sizing: border-box;
                    line-height: 0.57rem;
                    font-size: 0.22rem;
                    font-weight: bold;
                    color: #89E6FF;
                    background-image: url("../../assets/images/attendance-board/title_bg1.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .recordList{
                    width: 100%;
                    height: 3.7rem;
                    padding: 0.2rem 0.6rem;
                    box-sizing: border-box;
                    /deep/.el-carousel{
                        width: 100%;
                        height: 100%;
                        .el-carousel__container{
                            width: 100%;
                            height: 100%;
                            .el-carousel__item{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                    .recordItem{
                        width: 100%;
                        height: 50%;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        .photo{
                            margin-right: 0.3rem;
                            width: 0.98rem;
                            height: 1.28rem;
                            background: #9C9C9C;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .msg{
                            .people{
                                .name{
                                    width: 0.9rem;
                                    font-size: 0.22rem;
                                    font-weight: bold;
                                    color: #89E6FF;
                                    display: inline-block;
                                    line-height: 1;
                                }
                                .workType{
                                    font-size: 0.22rem;
                                    color: #89E6FF;
                                    line-height: 1;
                                }
                                .isManage{
                                    color: #FFC35B;
                                }
                            }
                            .typeAndTemp{
                                margin-top: 0.1rem;
                                margin-bottom: 0.12rem;
                                display: flex;
                                align-items: center;
                                .type{
                                    margin-right: 0.15rem;
                                    padding: 0.03rem 0.12rem;
                                    border: 1px solid #89E6FF;
                                    border-radius: 0.06rem;
                                    font-size: 0.18rem;
                                    color: #89E6FF;
                                    text-align: center;
                                    line-height: 1;
                                }
                                .temp{
                                    font-size: 0.26rem;
                                    color: #23FD8A;
                                    line-height: 1;
                                }
                                .red{
                                    color: #FF2B39 !important;
                                }
                            }
                            .gateName, .time{
                                margin-top: 0.08rem;
                                font-size: 0.18rem;
                                color: #FFFFFF;
                                opacity: 0.8;
                                line-height: 1;
                            }
                        }
                    }
                    .border_b{
                        border-bottom: 1px solid #23CEFD;
                    }
                }
            }
        }
    }
    .footer{
        text-align: center;
        font-size: 0.22rem;
        color: #FEFEFE;
        line-height: 0.6rem;
        opacity: 0.49;
    }
}
</style>
